<template>
<div class="playlist-detail">

<div class="pic">
    <van-icon name="arrow-left" @click="goBack" />
    <van-image :src="picUrl" fit="cover"></van-image>
</div>

<div class="play">
    <div v-if="songId==''">
        <span>播放全部</span>
    </div>
    
    <div v-else>
    <audio :src="songUrl" controls></audio>
    </div>
</div>

<div class="song-list">
    <ul>
        <li v-for="item in songList" :key="item.songid" @click="playSong(item)">
            <h4>{{item.songname}}</h4>
            <span>{{item.singer[0].name}}-{{item.albumname}}</span>
        </li>
    </ul>
</div>
</div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            songList:[],
                picUrl:"",
                songId:"",
                songUrl:"",
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
 axios.get("/api/songlist",{
            params:{
                id:this.$route.params.id
            }
        })  
        .then(res => {
            console.log(res.data.data)
            this.songList=res.data.data.songlist
            this.picUrl=res.data.data.logo
        })
        .catch(err => {
            console.error(err); 
        })
        },
         goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    playSong(item){
        this.songId=item.songid
        axios.get("/jsososo/song/urls",{
            params:{
                id:item.songmid
            }
        })
        .then(res => {
            console.log(res.data.data[item.songmid])
            this.songUrl=res.data.data[item.songmid]
        })
        .catch(err => {
            console.error(err); 
        })
    }
       
    }
}
</script>


<style scoped>
.play audio{

}
.pic{
    height: 275px;
   
}
.van-icon{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    font-size: 40px;
}
.van-image{
 /* position: relative;
    z-index: 1;
    display: block;
   
    object-fit: cover;
    border-radius: 18px; */
     width: 100%;
    height: 100%;
}
.van-icon{
    font-size: 2rem;
    position: absolute;
    top: 1rem;
    left: 0;
    z-index: 100;
    color: white;
}
.song-list {
  text-align: left;
  margin-bottom: 20px;
  padding: 0 20px;
}
.song-list span {
  color: gray;
}
.song-list > ul > li {
  margin-bottom: 20px;
}
.song-list > ul > li > h4 {
  margin-bottom: 5px;
}
.song-list > ul > li > span {
  color: gray;
}
.song-list span {
  margin-top: -10px;
  font-size: 15px;
}  

</style>